<template>
	<view class="content">
		<view v-if="isLoading == true"><image class="loading" src="https://huajia-online-1316192331.cos.ap-guangzhou.myqcloud.com/static/loading-1.gif"></image></view>
		<view v-if="isLoading == false">
			<view class="tab">
				<view class="tab-item" :class="{ active: currentTab === 'tab1' }" @click="switchTab('tab1')">系统消息</view>
				<view class="tab-item" :class="{ active: currentTab === 'tab2' }" @click="switchTab('tab2')">@我的</view>
			</view>
			<view class="content-item" v-show="currentTab === 'tab1'">
				<view class="page">
					<uni-list>
						<uni-list-chat
							v-for="one in list"
							:title="one.senderName"
							avatar="https://static-1258386385.cos.ap-beijing.myqcloud.com/img/System.jpg"
							:note="one.msg"
							badge-positon="left"
							:badge-text="one.readFlag ? '' : 'dot'"
							:key="one.id"
							link="navigateTo"
							:to="'../my_message_content/my_message_content?id=' + one.id + '&readFlag=' + one.readFlag + '&refId=' + one.refId"
						>
							<view class="chat-custom-right">
								<text class="chat-custom-text">{{ one.sendTime }}</text>
							</view>
						</uni-list-chat>
					</uni-list>
				</view>
			</view>
			<view class="content-item" v-show="currentTab === 'tab2'">该功能暂未开发！</view>
		</view>
	</view>
</template>

<script>
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
export default {
	components: {
		uniList,
		uniListItem
	},
	data() {
		return {
			currentTab: 'tab1',
			page: 1,
			length: 20,
			list: [],
			isLastPage: false,
			isLoading: true
		};
	},
	onShow: function() {
		let that = this;
		that.page = 1;
		that.isLastPage = false;
		// uni.pageScrollTo({
		// 	scrollTop: '0'
		// });
		this.loadMessageList(this);
	},
	onLoad: function() {
		let that = this;
		// that.page = 1;
		// that.isLastPage = false;
		// this.loadMessageList(this);
		setTimeout(function(resp) {
			that.isLoading = false;
		}, 400);
	},
	onReachBottom: function() {
		if (this.isLastPage) {
			return;
		}
		this.page = this.page + 1;
		this.loadMessageList(this);
	},
	methods: {
		switchTab(tab) {
			this.currentTab = tab;
		},
		loadMessageList: function(ref) {
			let data = {
				page: ref.page,
				length: ref.length
			};
			ref.ajax(ref.url.searchMessageByPage, 'POST', data, function(resp) {
				let result = resp.data.result;
				if (result == null || result.length == 0) {
					ref.isLastPage = true;
					ref.page = ref.page - 1;
					uni.showToast({
						icon: 'none',
						title: '已经到底了'
					});
				} else {
					if (ref.page == 1) {
						ref.list = [];
					}
					ref.list = ref.list.concat(result);
					if (ref.page > 1) {
						uni.showToast({
							icon: 'none',
							title: '又加载了' + result.length + '条消息'
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="less">
@import url('my_message.less');
</style>
